<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/weui.css">
    <link rel="stylesheet" href="css/main_phone.css">
    <title>Document</title>
</head>
<body>
     <!-- plate-bg -->
    <div class="plate-bg">
        <!-- plate -->
        <div class="plate" id="app"  >
            <!-- plate-header -->
            <div class="plate-header">
                <!-- plate-tit -->
                <div class="plate-tit">
                    <h3>请输入车牌号</h3>
                    <i class="weui-icon-cancel"></i>
                </div> 
                 <!-- plate-input-bg -->
                <div class="plate-input-bg" :class="{'plate-input-news':isNew}">
                    <div class="plate-input">
                        <dl class="dot">·</dl>
                        <dl v-for="item in plateArr" v-text="item"></dl>
                    </div>
                    <div class="plate-input-border">
                        <dl v-for="item in plateArrBorder" v-text="item"></dl>
                    </div>
                </div>
                 <!-- plate-input-bg -->
            </div>
            <!-- /plate-header -->
            <!-- plate-footer -->
            <div class="plate-footer">
                <div class="plate-footer-tit">
                    <h3 v-show="car_type" @click="clickCarType(0)">普通车牌</h3>
                    <h3 v-show="!car_type" @click="clickCarType(1)">新能源</h3>
                    <div class="plate-key-cn" :class="{'plate-flex':isPlateTxtTit}">
                        <dl v-for="item in plateTxtTit" @click="PlatePush(item)" v-text="item"></dl>
                    </div>
                </div>
                <div class="plate-key-cn" :class="{'plate-flex':isPlateTxt}">
                    <dl v-for="item in plateTxt" @click="PlatePush(item)" v-text="item"></dl>
                </div>
                 <div class="plate-key-en">
                     <div class="plate-key-en-num" :class="{'plate-flex':isPlateNum}">
                        <dl v-for="item in plateNum" @click="PlatePush(item)" v-text="item"></dl>
                     </div>
                    <div class="plate-key-en-num" :class="{'plate-flex':isPlateEn}">
                        <dl v-for="item in plateEnOne" @click="PlatePush(item)" v-text="item"></dl>
                        <dl class="plate-key-en-num-bg">I</dl>
                        <dl class="plate-key-en-num-bg">O</dl>
                        <dl v-for="item in PlateP" @click="PlatePush(item)" v-text="item"></dl>
                    </div>
                    <div class="plate-key-en-num" :class="{'plate-flex':isPlateEn}">
                        <dl v-for="item in plateEnTwo" @click="PlatePush(item)" v-text="item"></dl>
                    </div>
                    <div class="plate-key-en-num" :class="{'plate-flex':isPlateEn}">
                        <dl v-for="item in plateEnThree" @click="PlatePush(item)" v-text="item"></dl>
                        <span><i class="weui-icon-cancel" @click="detele"></i></span>
                    </div>
                 </div>
            </div>
            <!-- /plate-footer -->
        </div>
        <!-- /plate -->
    </div>
     <!-- /plate-bg -->
     <!-- js -->
     <aside>
         <script src="js/jquery.min.js"></script>
         <script src="js/vue.js"></script>
         <script>
            var plateList={
                txt: [
                    '京', '津', '冀', '晋', '辽', '蒙', '吉', '黑',
                    '沪', '苏', '浙', '皖', '闽', '赣', '赣', '豫',
                    '鄂', '湘', '粤', '桂', '琼', '渝', '川', '贵',
                    '云', '陕', '甘', '青', '宁', '新', '藏', '使'
                ],
                txt_tit:['学','警','领'],
                num:['1','2','3','4','5','6','7','8','9','0'],
                en_one:['Q','W','E','R','T','Y','U'],
                p:['P'],
                en_two:['A','S','D','F','G','H','J','K','L'],
                en_three:['Z','X','C','V','B','N','M'],
            }

             new Vue({
                 el:'#app',
                 data:{
                    plateTxt:plateList.txt,             //文字键盘
                    plateTxtTit:plateList.txt_tit,      //学，警，领
                    plateNum:plateList.num,             //数字键盘
                    plateEnOne:plateList.en_one,        //第一排英文
                    PlateP:plateList.p,                 //p
                    plateEnTwo:plateList.en_two,        //第二排英文
                    plateEnThree:plateList.en_three,    //第三排英文
                    car_type:true,                      // 车牌类型
                    plateArr:[],                        //车牌号
                    plateArrBorder:[],                  //车牌号border
                    isPlateTxt:true,                    //文字键盘显示隐藏
                    isPlateTxtTit:false,                //学，警，领显示隐藏
                    isPlateNum:false,                   //数字显示隐藏
                    isPlateEn:false,                    //英文显示隐藏
                    isNew:false,                        //是否是新能源
                 },
                 methods:{
                     PlatePush:function(item){
                        //普通车牌
                        if(this.car_type){
                            //添加
                            if (this.plateArr.length < 7) {
                                this.plateArr.push(item)
                                this.plateKey()
                                // 输入完毕
                                if (this.plateArr.length == 7) {
                                    $('.plate-bg').fadeOut(400)
                                    this.plate_car = this.plateArr.join('')
                                }
                            } 
                        }else{
                            //添加
                            if (this.plateArr.length < 8) {
                                this.plateArr.push(item)
                                this.plateKey()
                                // 输入完毕
                                if (this.plateArr.length == 8) {
                                    $('.plate-bg').fadeOut(400)
                                    this.plate_car = this.plateArr.join('')
                                }
                            }
                        }
                        
                     },
                     detele:function(){
                         this.plateArr.pop()
                         this.plateKey()
                         console.log(this.plateArr.length)
                     },
                     plateKey:function(){
                         if (this.plateArr.length == 0) {
                             this.isPlateHide()
                             this.isPlateTxt = true;
                         }
                         if (this.plateArr.length == 1) {
                             this.isPlateHide()
                             this.isPlateEn = true;  
                         }
                         //车牌位数为2-5
                         if (this.plateArr.length >= 2) {
                            this.isPlateHide()
                            this.isPlateNum = true;
                            this.isPlateEn = true;  
                         }
                         //普通车牌
                         if(this.car_type){

                             if (this.plateArr.length == 6) {
                                 this.isPlateHide()
                                 this.isPlateTxtTit = true;
                                 this.isPlateNum = true;
                                 this.isPlateEn = true;
                             }
                         }
                     },
                     isPlateHide:function(){
                         this.isPlateTxt = false;
                         this.isPlateTxtTit = false;
                         this.isPlateNum = false;
                         this.isPlateEn = false; 
                     },
                     clickCarType:function(num){
                         if(num==0){
                             this.car_type=false;
                             this.isNew=true;
                             this.plateArrBorder.length = 9
                         }else{
                             this.car_type=true;
                              this.isNew=false;
                              this.plateArrBorder.length = 8
                         }
                         this.plateArr=[]
                         this.plateKey()
                     },
                     //显示
                     plate_number: function () {
                         this.plateArr = []
                         this.plateKey()
                         $('.plate-bg').fadeIn(400)
                     },
                     //关闭
                     plate_colse: function () {
                         $('.plate-bg').fadeOut(400)
                     }
                 },
                //  创建完成
                 created:function(){
                     this.plateArrBorder.length = 8
                 },
             })
         </script>
     </aside>
     <!-- /js -->
</body>
</html>